import { defineStore } from 'pinia'
import router from '@/router' // 导入路由器实例
// 导入转换函数和组件映射表 (尽管转换函数内部使用了 componentMap，这里导入也可以)
import generateRoutesFromBackend from '@/router/generateRoutes'
import componentMap from '@/utils/componentMap'
import { processRouteConfig } from '@/utils/addPath.js'

// 导入你的后端 API 函数
import { getRoute } from '@/api/user.js'

export const useRouteStore = defineStore('route', {
  state: () => ({
    // 存储动态加载的路由 (可选，用于生成菜单等)
    dynamicRoutes: [],
    // 标志位，指示是否已成功加载并添加动态路由
    hasAddRoutes: false,
  }),

  actions: {
    /**
     * 模拟获取后端路由数据
     * 实际应用中，这里应该调用你的后端 API
     * 返回的格式应与 componentMap 中的 key 对应
     */
    async fetchBackendRoutes() {
      const routes = [
        {
          path: '/',
          redirect: '/home',
          name: 'Layout',
          component: 'layout',
          meta: {
            requiresAuth: true,
            title: '布局',
          },
          children: []
        },
      ]

      // 网络请求
      const {code, data} = await getRoute()
      if (code == 200) {
        routes[0].children = processRouteConfig(data)
        console.log('ruoters 👍👍 OK!!!')
        console.log(routes)

        // 模拟成功返回数据// 模拟成功返回数据
        return routes
      } else {
        console.log('ruoters 👎👎 失败!!!')

        // 清空 cookie中的satoken
        document.cookie =
          'satoken=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT'
        // 退出回到登录页面
        router.push('/login')
      }
    },

    /**
     * 加载并添加动态路由
     * 在用户登录后调用一次
     * @returns {Promise<boolean>} - 是否成功加载并添加路由
     */
    async loadDynamicRoutes() {
      // 如果已添加，直接返回成功
      if (this.hasAddRoutes) {
        return true
      }

      try {
        // 1. 从后端获取路由数据
        const backendRoutes = await this.fetchBackendRoutes()
        if (!backendRoutes || backendRoutes.length === 0) {
          console.warn('[Dynamic Router] Backend returned no dynamic routes.')
          this.hasAddRoutes = true // 即使没有路由也标记为已加载，避免重复尝试
          return true // 视为成功加载了0个路由
        }

        // 2. 将后端数据转换为 Vue Router 格式
        const dynamicRoutes = generateRoutesFromBackend(backendRoutes)
        if (!dynamicRoutes || dynamicRoutes.length === 0) {
          console.error(
            '[Dynamic Router] No valid routes generated from backend data.'
          )
          // 失败也标记为已加载，防止无限尝试，但返回 false 表示加载失败
          this.hasAddRoutes = true
          return false
        }

        // 3. 添加动态路由到路由器实例
        dynamicRoutes.forEach((route) => {
          // 使用 router.addRoute 添加转换后的路由
          router.addRoute(route)
        })

        // 可选：将生成的动态路由存储到 store state 中，用于生成菜单等
        this.dynamicRoutes = dynamicRoutes

        // 4. 添加 catch-all 404 路由 (必须在所有动态路由添加后)
        // 确保 constantRoutes 中没有 `/ :pathMatch(.*)*` 的 redirect 路由
        // 添加一个使用组件的 404 路由
        router.addRoute({
          path: '/:pathMatch(.*)*', // 匹配所有未匹配到的路径
          name: 'NotFoundCatchAll', // 给一个独特的名称
          component: componentMap['404'], // 映射到你的 404 页面组件
          meta: { requiresAuth: false, title: '页面不存在' }, // 通常 404 不需要登录
        })

        // 5. 设置标志位为 true
        this.hasAddRoutes = true

        return true // 表示成功
      } catch (error) {
        console.error('Error loading dynamic routes:', error)
        // 加载失败，设置标志位为 true 防止无限循环，并返回 false
        this.hasAddRoutes = true
        return false // 表示失败
      }
    },

    // 清空动态路由和状态 (用户登出时调用)
    resetRoutes() {
      // 注意：这里只是重置 store 的状态，并不能真正移除 router 实例中已添加的路由
      // Vue Router 4 移除路由需要知道路由的 name 或 path，并且逐个移除
      // router.removeRoute(name)
      // 更推荐的做法是依赖 beforeEach 守卫来检查 isLogin 状态，阻止未登录用户访问需要权限的路由
      this.dynamicRoutes = []
      this.hasAddRoutes = false
      // 简单的重置不移除路由，依赖导航守卫判断权限
    },
  },
})
